<template>
  <div class="container" v-loading="loading">
    <div class="aside" :style="collapse?'flex: 0 0 64px;':'flex: 0 0 100px;'">
      <el-menu
        :default-active="$route.path"
        :collapse="collapse"
        :collapse-transition="false"
        background-color="#545c64"
        text-color="#aaa"
        active-text-color="#fff"
        :unique-opened="false"
        router
      >
        <template v-for="m in menus">
          <el-submenu :index="m.path" :key="m.label" v-if="m.children">
            <template slot="title">
              <i :class="m.icon" v-if="m.icon"></i>
              <span>{{m.label}}</span>
            </template>
            <el-menu-item :index="mc.path" v-for="mc in m.children" :key="mc.label">
              <i :class="mc.icon" v-if="mc.icon"></i>
              <span slot="title">{{mc.label}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="m.path" :key="m.label" v-else>
            <i :class="m.icon" v-if="m.icon"></i>
            <span slot="title">{{m.label}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div class="main">
      <div class="header">
        <div class="nav">
          <el-button icon="mdi mdi-menu" type="text" @click="collapse=!collapse"></el-button>
        </div>
        <div class="user-info">
          <a class="nohref" href="/#/userCenter">欢迎您，{{user.username}}</a>
          <el-button type="primary" @click="logout">退出</el-button>
        </div>
      </div>
      <div class="main-content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import menus from "@/menu.js";
import API from "../../utils/Api";
let Base64 = require("js-base64").Base64;
export default {
  data() {
    return {
      collapse: false,
      menus: menus,
      user: [],
      loading: false
    };
  },
  mounted() {
    console.log(this.$route.path);
    API.auth.profile([], res => {
      if (res.code === 200) {
        this.user = res.data.user;
        window.sessionStorage.uc = Base64.encode(JSON.stringify(res.data.user));
        this.loading = false;
      } else {
        this.$message({
          type: "error",
          message: "数据请求失败，请刷新重试"
        });
      }
    });
  },
  methods: {
    logout() {
      let self = this;
      window.sessionStorage.clear();
      self.$router.push("/login");
    }
  }
};
</script>
<style lang="scss">
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  width: 100%;

  .aside {
    transition: 0.2s;
    background-color: #545c64;
    height: calc(100% + 2px);
    .el-menu {
      border-right: none;
    }
    .mdi {
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      display: inline-block;
    }
  }
  .main {
    flex: auto;
    background-color: #f2f2f2;
    .main-content {
      padding: 20px;
      width: calc(100%-50px);
      height: calc(100% - 100px);
      overflow: scroll;
    }
  }
}

.header {
  display: flex;
  line-height: 60px;
  background-color: #fff;
  padding: 0 20px;
  border-bottom: solid 1px #eee;
  .shop-name {
    font-weight: 900;
  }
  .nav {
    flex: 400px;
  }
}

.nohref {
  color: #343434;
  font-size: 14px;
  text-decoration: none;
  margin-right: 10px;
}
</style>
